<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4722750_2c6zfglrfhf.css">
</head>
<style>
.head{
    width: 100vw;
    height: 12vw;
    border-bottom: 1px solid #adadad;
    /* position: absolute; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.head .head-left{
    
    width: 59vw;
    height: 7vw;
}
.head .head-left .shop{
    font-size: 5vw;
    color: #09b674;
}
.delete{
    margin-right: 3vw;
    margin-top: 1vw;
    float: right;
    font-size: 4vw;
    color: #101010;
}
.goods-list{
    width: 100vw;
    height: 33vw;
    /* border: 1px solid black; */
    position: relative;
}
.goods-item{
    width: 98vw;
    height: 28vw;
    /* border: 1px solid rebeccapurple; */
    position: absolute;
    left: calc(50% - 48vw);
    top: 2vw;
}
.goods-item input{
    position: absolute;
    top: 10vw;
    width: 5vw;
    height: 5vw;
}
.goods-info{
    width: 84vw;
    height: 25vw;
    /* border: 1px solid red; */
    float: right;
    margin-right: 2vw;
    margin-top: 1.5vw;
    display: flex;
    justify-content: space-between;
}

.goods-info img{
    width: 25vw;
    height: 25vw;
    /* background-image: url(../img/1.jpg); */
    /* background-size: cover;
    background-repeat: no-repeat;
    background-position: center; */
}
.goods-name{
    width: 56vw;
    height: 25vw;
    /* border: 1px solid green; */
    box-sizing: border-box;
    position: relative;
    
}
.goods-name .name{
    right: 0;
    font-size: 3.4vw;
    
}
.goods-name .price{
    font-size: 3.5vw;
    font-weight: bold;
    color: #fc6217;
    position: absolute;
    bottom: 0;
    left: 0;
}
.goods-name .money{
	font-size: 3vw;
	color: #999999;
    text-decoration: line-through;
    position: absolute;
    bottom: 0;
    left: 17vw;
}
.goods-name .num{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14vw;
    height: 5vw;
    border-radius: 0vw;
    /* border: 1px solid #d9d9d9; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.num .reduce{
    color: #999999;
}
/* 间隔 */
.interval{
	width: 100vw;
	height: 3vw;
	background-color: #f4f4f4;
}
/* 为你推荐 */
.recommend{
    width: 100vw;
    height: 12vw;
    color: #09b674;
    text-align: center;
    line-height: 12vw;
    font-weight: bold;
    /* border: 1px solid blue; */
    position: relative;
}
.recommend-text{
    font-size: 2vw;
    position: absolute;
    margin-left: 2vw;
}
.recommend-list{
    width: 100vw;
    height: 52vw;
    /* border: 1px solid hotpink; */
    display: flex;
}
.recommend-item{
    width: 48vw;
    height: 52vw;
    /* border: 1px solid saddlebrown; */
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.recommend-list img{
    width: 36vw;
	height: 36vw;
    margin-top: 3vw;
}
.recommend-item span{
    font-size: 3.5vw;
    font-weight: bold;
}
.recommend-item label{
    font-weight: 500;
    font-size: 3vw;
}
/* 间隔 */
.space{
width: 3vw;
height: 52vw;
background-color: #f4f4f4;
}
/* 结算 */
.settlement{
    width: 100vw;
    height: 13vw;
    display: flex;
    /* border: 1px solid black; */
}
.settlement-left{
    width: 77vw;
    height: 13vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border: 1px solid hotpink; */
    margin-left: 1vw;
}
.settlement-left-bottom{
    margin-right: 4vw;
}
.settlement-right{
    width: 28vw;
	height: 13vw;
    font-size: 4vw;
    color: #ffffff;
    text-align: center;
    line-height: 13vw;
	background-color: #09b674;
}
/* 底部 */
.footer{
    width: 100vw;
    height: 11vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
line-height: 5vw;
margin-top: 2vw;
bottom: 0;
}
.footer-item{
    width: 9vw;
    height: 9vw;
    /* font-size: 3vw; */
    color: #999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-item i{
    font-size: 6vw;
}
.footer-item span{
    font-size: 3vw;
}
</style>
<body>
    <!-- 头部 -->
     <div class="head">
        <div class="head-left">
            <span class="shop">购物车</span>
            <span class="delete">删除</span>
        </div>
     </div>
     <!-- 商品列表 -->
     <div class="goods-list">
        <div class="goods-item">
            <input type="checkbox">
            <div class="goods-info">
                <img src="../img/1.jpg" alt="">
                 <!-- <div class="goods-img"></div> -->
                 <div class="goods-name">
                    <span class="name">YSL/圣罗兰女士香水自由之水沙漠百合黑鸦
                        片反转巴黎50ML礼盒装</span>
                    <span class="price">¥408.97</span>
                    <span class="money">￥2250</span>
                    <div class="num">
                        <span class="reduce">-</span>
                        <span>1</span>
                        <span class="reduce">+</span>
                    </div>
                 </div>
            </div>
            </div>
        </div>
     </div>
<div class="interval"></div>
     <div class="goods-list">
        <div class="goods-item">
            <input type="checkbox">
            <div class="goods-info">
                <img src="../img/2.jpg" alt="">
                 <div class="goods-name">
                    <span class="name">BYREDO柏芮朵纯真年代淡香
                        精香水50ml/100ml</span>
                    <span class="price">¥1579.79</span>
                    <span class="money">￥2850</span>
                    <div class="num">
                        <span class="reduce">-</span>
                        <span>1</span>
                        <span class="reduce">+</span>
                    </div>
                 </div>
            </div>
            </div>
        </div>
     </div>
     <div class="interval"></div>
     <!-- 为你推荐  -->
     <div class="recommend"> 
        <span>为你推荐</span>
        <span class="recommend-text">for you</span>
        <span class="recommend-text" style="top: 2vw;">recommended</span>
     </div>
     <!-- 推荐列表 -->
     <div class="recommend-list">
        <div class="recommend-item" style="margin-left: 0.5vw;">
           <img src="../img/3.jpg" alt=""> 
           <span>汤姆福特香水<label>/TF白麝香/乌木沉香/荆棘玫
            瑰/阳光琥珀</label></span>
        </div>
        <div class="space"></div>
        <div class="recommend-item">
            <img src="../img/4.jpg" alt=""> 
            <span>NI.SCENT<label>宿醉 薄荷精油 持久清凉醒脑提神室内办
                公天然车载香薰</label></span>
         </div>
     </div>
     <!-- 结算 -->
      <div class="settlement">
        <div class="settlement-left">
            <div class="settlement-left-top">
                <input type="checkbox">
                <span style="font-size: 4vw;">全选</span>       
            </div>
            <div class="settlement-left-bottom">
                <span>合计:</span>
                <span>￥3329.76</span>
            </div>
        </div>
        <div class="settlement-right">
            <span>去结算</span>
        </div>
      </div>
      <!-- 底部 -->
       <div class="footer">
        <div class="footer-item">
            <i class="iconfont icon-shouye"></i>
            <span>首页</span>
        </div>
        <div class="footer-item">
            <i class="iconfont icon-fenlei"></i>
            <span>分类</span>
        </div>
        <div class="footer-item">
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车</span>
        </div>
        <div class="footer-item">
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </div>
       </div>
</body>
</html>                            